@import '../../../themes/mixins/buttons';
@import '../sidebarConfig';

.hideThumb {
  display: none !important;
}

.scrollbarThumb {
  background-color: var(--theme-sidebar-wallets-scrollbar-background-color);
  border-radius: 2px;
  width: 4px !important;

  &:active {
    background-color: var(
      --theme-sidebar-wallets-scrollbar-background-color-active
    );
  }

  &:hover {
    background-color: var(
      --theme-sidebar-wallets-scrollbar-background-color-hover
    );
  }
}

.wallets {
  flex: 1 1 auto;
}

.addWalletButton {
  @include button;
  align-items: center;
  background-color: var(--theme-sidebar-menu-add-button-background-color);
  color: var(--theme-sidebar-menu-add-button-text-color);
  display: flex;
  height: $sidebar-button-height;
  width: $sidebar-width - $sidebar-minimized-category-width;

  &:hover {
    background-color: var(
      --theme-sidebar-menu-add-button-background-color-hover
    );
  }

  .icon {
    line-height: 12px;
    margin: 0 20px;
    width: 25px;
    & > svg {
      width: 25px;
      path {
        fill: var(--theme-icon-add-wallet-from-sidebar-color);
      }
    }
  }

  span {
    font-family: var(--font-regular);
    font-size: 18px;
  }

  &.active {
    background-color: var(
      --theme-sidebar-menu-add-button-background-color-active
    );
    cursor: default;
  }
}

.walletSortControls {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  margin-top: 14px;
  width: 100%;

  .walletSortOffset {
    margin-right: 12px;
  }
}

.walletSearchContainer {
  align-items: center;
  display: flex;
  height: 84px;
  padding: 0 20px;
}
